<template>
	<scroll-view class="backview" bounces="false">
		<lexiconNavVue title="积分详情" />
		<view class="beeplan-integral-topView">
			<view class="beeplan-left-content">
				<view class="integral-topview-number">{{points}}</view>
				<view class="integral-topview-msg">今日已累计获得<text class="integralnumberColor">{{toDayGetPoints}}</text>积分
				</view>
			</view>
			<image class="beeplan-right-image" src="../../static/image/fjh/fengjihua_banner_text.png"
				mode="scaleToFill" />
		</view>
		<view class="bee-plan-badge">
			<view class="gameType-topTitle-view" style="margin: 10px 0rpx;">
				<view class="gameType-topTitle" style="color: white;">
					积分收支明细 | Points Income and Expenditure Details
				</view>
				<view class="gameType-line"></view>
			</view>
			<view class="bottom-content-backView column" :style="{ height: scrollHeight + 'px'}">
				<z-paging :fixed="false" ref="paging" v-model="integralList" @query="getQueryList"
					style="width: 100%; height: 100%;" :default-page-size='20'>
					<view class="content-listView-backview" v-for="(item, index) in integralList" :key="index">
						<text class="content-listView-getDate">{{item.createTime}}</text>
						<text class="content-listView-leftTitle">{{item.pointsRecord}}</text>
						<text class="content-listView-number">{{item.pointsVariety}}</text>
					</view>
				</z-paging>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				scrollHeight: 0,
				integralList: [],
				points: '',
				toDayGetPoints: '',
				formData: {

				},
			}
		},
		onReady() {
			const that = this
			uni.createSelectorQuery().select('.gameType-topTitle-view').boundingClientRect(rect => {
				that.scrollHeight = uni.getSystemInfoSync().windowHeight - rect.bottom - 30;
			}).exec();
		},
		mounted() {
			this.$refs.paging.reload();
		},
		methods: {
			getQueryList(pageNo, pageSize) {
				this.formData.pageNum = pageNo;
				this.formData.pageSize = pageSize;
				this.$http.getBeePlanPointsRecordList(this.formData).then(res => {
					if (res.code == 200) {
						console.log('res_____', res);
						this.points = this.$util.changeNumber(res.data.points, 2)
						this.$refs.paging.complete(res.data.pointsRecord);
						this.toDayGetPoints = res.data.toDayGetPoints;
					} else {
						this.$refs.paging.complete(false);
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.beeplan-integral-topView {
		width: 100%;
		padding: 20px 0px;
		background: #140e01;
		box-shadow: 5rpx 0rpx 10rpx 5rpx rgb(0, 0, 0);
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.beeplan-left-content {
		width: 60%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
	}

	.integral-topview-number {
		width: 100%;
		font-size: 44px;
		color: rgb(255, 255, 255);
		font-weight: bold;
		text-align: left;
		line-height: 50px;
		height: 50px;
	}

	.integralnumberColor {
		font-size: 15px;
		color: red;
	}

	.integral-topview-msg {
		font-size: 13px;
		padding: 8px 20px;
		margin-top: 10px;
		color: rgb(0, 0, 0);
		text-align: left;
		font-family: 'hzgb';
		background: var(--scheduleBackColor);
		border-radius: 25px;
	}

	.bee-plan-badge {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
		background: var(--beeGradeTopBack);
		border-radius: 15px;
		margin-top: 15px;
	}

	.beeplan-right-image {
		width: 107px;
		height: 37px;
	}

	.bottom-content-backView {
		width: 100%;
		display: flex;
		align-items: center;
	}


	.column {
		flex-direction: column;
	}

	.content-listView-backview {
		width: 90%;
		padding: 0px 15px;
		height: 35px;
		background: var(--scheduleBackColor);
		font-family: 'hzgb';
		border-radius: 18px;
		margin-left: 5%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-top: 13px;
	}

	.content-listView-getDate {
		width: 95px;
		font-size: 14px;
		color: black;
		text-align: left;
	}

	.content-listView-leftTitle {
		width: 130px;
		font-size: 12px;
		color: rgb(54, 54, 54);
		text-align: center;
	}

	.content-listView-number {
		width: 60px;
		font-size: 14px;
		color: var(--themeColorTwo);
		font-weight: 600;
		text-align: right;
	}
</style>